<template>
  <div class="fruits-list">
    <ul>
      <li @click="goDetail">
        <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1544844528&di=4d2ffc416d94f3999c3e2eb3ddf1398d&src=http://pic20.photophoto.cn/20110905/0035035554940889_b.jpg" alt="">
        <h3>西瓜</h3>
        <div class="food-tips">
          <i class="iconfont icon-gantanhao-yuankuang"></i><span>孕期</span>
          <i class="iconfont icon-gantanhao-yuankuang"></i><span>坐月子</span>
          <i class="iconfont icon-gantanhao-yuankuang"></i><span>哺乳期</span>
        </div>
        <p>宝宝不能吃</p>
      </li>
      <li @click="goDetail">
        <img src="https://img0.pcbaby.com.cn/pcbaby/baike/yycs/1502/shanzha.jpg" alt="">
        <h3>山楂</h3>
        <div class="food-tips">
          <i class="iconfont icon-gantanhao-yuankuang"></i><span>孕期</span>
          <i class="iconfont icon-gantanhao-yuankuang"></i><span>坐月子</span>
          <i class="iconfont icon-trues"></i><span>哺乳期</span>
        </div>
        <p>宝宝不能吃</p>
      </li>
    </ul>
  </div>
</template>
<script>
// import Vue from 'vue'
export default {
  data () {
    return {
      list: []
    }
  },
  methods: {
    goDetail () {
    // this.$router.push(`/detail/${item.id}`)
      this.$router.push('/detail')
    }
    // egg () {
    //   this.$router.push('/eat/egg')
    // }
    // achievement () {
    //   this.$router.push('/achievement')
    // },
    // friends () {
    //   this.$router.push('/friends')
    // }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.fruits-list {
  @include rect(100%, 100%);
  // overflow: auto;
  ul {
    @include rect(94%, 100%);
    margin: 3% auto;
    li {
      height: 1.2rem;
      border-bottom: 1px solid #cccccc;
      img {
        @include rect(1rem, 1rem);
        float: left;
        margin: 0.1rem;
      }
      h3 {
        @include rect(60%, 0.25rem);
        float: left;
        line-height: 0.25rem;
        font-size: 0.16rem;
        color: rgb(17, 17, 17);
        font-family: PingFangSC-regular;
        font-weight: 500;
        margin-top: 0.1rem;
      }
      .food-tips {
        float: left;
        @include rect(60%, 0.25rem);
        i {
          color: #d43131;
          font-size: 0.14rem;
          margin-left: 0.05rem;
        }
        span {
          font-size: 0.12rem;
          padding-left: 0.03rem;
        }
      }
      p {
        float: left;
        font-size: 0.12rem;

      }
    }
  }
}
</style>
